<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>快速下单</title>

    <link href="/css/common.css" rel="stylesheet">
    <link href="/css/main-header.css" rel="stylesheet">

    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

</head>
<body>

<% include main-header.ejs %>

<div class="main1">
    <div class="main-center clearfix">

        
            <form class="main1-form" id="main1-form">

                <div class="weui-cells weui-cells_form">

                    <i class="form-tips">注：您的部分信息会默认从上次提交的订单中获取</i>

                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_name">姓名</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_name"
                                    name="of_name"
                                    type="text"
                                    placeholder="请输入收货人姓名"
                            >
                        </div>
                    </div><!--weui-cell-->

                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_phone">手机</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_phone"
                                    name="of_phone"
                                    type="number"
                                    placeholder="请输入您的手机号码"
                            >
                        </div>
                    </div><!--weui-cell-->

                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_tailNumber">手机尾号</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_tailNumber"
                                    name="of_tailNumber"
                                    type="number"
                                    placeholder="请输入您预留的手机尾号"
                            >
                        </div>
                    </div><!--weui-cell-->



                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_number">取货码</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_number"
                                    name="of_number"
                                    type="text"
                                    placeholder="请输入取货码"
                            >
                        </div>
                    </div><!--weui-cell-->

                    <i class="form-tips">注：若您的快递为韵达近邻宝，请选择近邻宝相应货柜</i>

                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_type">快递公司</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_type"
                                    name="of_type"
                                    type="text"
                                    placeholder="请选择快递公司"
                            >
                        </div>
                    </div><!--weui-cell-->

                    <i class="form-tips">注：若列表中没有您的快递公司，请选择其它，并将其备注</i>


                    <div class="weui-cell">
                        <div class="weui-cell__hd">
                            <label class="weui-label" for="main1-form-of_address">送货地址</label>
                        </div>
                        <div class="weui-cell__bd">
                            <input
                                    class="weui-input"
                                    id="main1-form-of_address"
                                    name="of_address"
                                    type="text"
                                    placeholder="例如：明泽苑33号楼"
                            >
                        </div>
                    </div><!--weui-cell-->
                </div>

                <div class="weui-cells__title">备注</div>
                <div class="weui-cell">
                    <div class="weui-cell__bd">
                        <textarea
                                id="main1-form-of_note"
                                name="of_note"
                                class="weui-textarea"
                                placeholder="有特殊情况填写"
                                rows="3"
                        ></textarea>
                        <!--<div class="weui-textarea-counter"><span>0</span>/200</div>-->
                    </div>
                </div><!--weui-cell-->

                <div class="weui-cell">
                    <div class="weui-cell__hd">
                        <label class="weui-label" for="main1-form-of_payType">支付方式</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input
                                class="weui-input"
                                id="main1-form-of_payType"
                                name="of_payType"
                                type="text"
                                placeholder="请选择支付方式"
                                value="QQ"
                        >
                    </div>
                </div><!--weui-cell-->

                <i class="form-tips">注：若您使用手机QQ下单，长按QQ支付二维码即可支付</i>

                <p class="main1-text">支付时一定要备注您的名字哦</p>

                <img src="/img/qq.jpg" class="payType-img" id="payType-img" style="display: block">

                <input class="weui-btn weui-btn_primary btn-login" id="main1-form-submit" type="submit" value="提交">
          
            </form>
        

    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validate/1.17.0/jquery.validate.min.js"></script>

<script src="/js/main-header.js"></script>

<script>
    $(document).ready(function () {

        // 还原用户信息
        $("#main1-form-of_name").val("<%= loginUser.of_name %>")
        $("#main1-form-of_phone").val("<%= loginUser.of_phone %>")
        $("#main1-form-of_tailNumber").val("<%= loginUser.of_tailNumber %>")
        $("#main1-form-of_address").val("<%= loginUser.of_address %>")


        var data_new,  // 新的订单信息，用于 ajax
            data_old;

        // 请求快递公司列表（of_type）
        $.post("/getOrderFormTypeList", function (result) {
            if (!result){
                alert("服务器错误");
            }


            console.log(result)

            // of_type picker
            $("#main1-form-of_type").picker({
                title: "请选择快递公司",
                cols: [
                    {
                        textAlign: 'center',
                        values: result
                    }
                ],
                onClose: function () {
                    var of_type = $("#main1-form-of_type");
                    of_type.valid();  // 选择后再次验证

                    if (of_type.val() === "其它") {
                        // 选择其它后，必须在备注中写出快递公司
                        validation.settings.rules.of_note.required = true;
                    }
                }
            });

        })







        // of_payType picker
        $("#main1-form-of_payType").select({
            title: "请选择支付方式",
            items: ['QQ', '支付宝'],
            onClose: function () {

                $("#main1-form-of_payType").valid();  // 选择后再次验证

                var payType = $("#main1-form-of_payType").val(),
                    payType_img = $("#payType-img")


                if (payType === "支付宝") {
                    payType_img.attr('src','/img/zhifubao.jpg')
                } else if (payType === "QQ") {
                    payType_img.attr('src','/img/qq.jpg')
                }
            }
        });


        var validation = $("#main1-form").validate({
            rules: {
                of_name: "required",
                of_phone: {
                    required: true,
                    rangelength: [11,11],
                    digits: true
                },
                of_type: "required",
                of_payType: "required",
                of_number: "required",
                of_address: "required",
                of_tailNumber: {
                    required: true,
                    rangelength: [4,4],
                    digits: true
                },
                of_note: {
                    required: false
                }
            },
            messages: {
                of_name: "此栏目必填",
                of_phone: {
                    required: "此栏目必填",
                    rangelength: "请输入11位手机号码",
                    digits: "请填写正确的手机号码"
                },
                of_type: "此栏目必填",
                of_payType: "此栏目必填",
                of_number: "此栏目必填",
                of_address: "此栏目必填",
                of_tailNumber: {
                    required: "此栏目必填",
                    rangelength: "请输入4位手机尾号",
                    digits: "请填写正确的手机尾号"
                },
                of_note: {
                    required: "请输入您的快递名称"
                }
            },
            focusInvalid: true,  // 自动获取焦点到第一个填写错误的地方
            submitHandler: function () {
                // 全部填写成功后的方法
                data_new = {
                    "of_name": $("#main1-form-of_name").val(),
                    "of_phone": $("#main1-form-of_phone").val().toString(),
                    "of_type": $("#main1-form-of_type").val(),
                    "of_number": $("#main1-form-of_number").val(),
                    "of_address": $("#main1-form-of_address").val(),
                    "of_payType": $("#main1-form-of_payType").val(),
                    "of_note": $("#main1-form-of_note").val() ? $("#main1-form-of_note").val() : '无',
                    "of_tailNumber": $("#main1-form-of_tailNumber").val().toString()
                };
                $.post("/doNewOrderForm", data_new, function (result) {
                    if (result === "1"){  // 提交成功
                        alert('提交成功')
                        window.location = "/";
                    }
                })
            },
            errorElement: "p"  // 错误标签用<p>
        })

    });
</script>

</body>
</html>